import React from 'react';
import {NavLink} from 'react-router-dom';
import {Modal,Toast} from 'antd-mobile';
import './index.scss';

class Redeem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      redeem: '1234567890'
    };
  }
  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }
  checkRedeem = ele => {
    if(ele.value === this.state.redeem){
      Toast.success('兑换成功');
      this.props.history.replace('/');
    }
    else {
      this.refs.explain.innerHTML = '无效兑换码';
    }
  }
  render() {
    return (
      <div className="page_redeem">
        <div className="g-hd">
          <ul className="m-pagenav">
              <NavLink to="/">
              <li className="itm iconfont icon-icon" />
              </NavLink>
              <li className="itmm">
              <b />
              </li>
              <li className="itms">兑换码换书</li>
          </ul>
          <div className="act">
              <div className="m-login iconfont icon-sanheng" onClick={this.showModal('modal')} />
              <NavLink to="/search">
                <div className="m-search iconfont icon-sousuo" />
              </NavLink>
          </div>
        </div>

        <div className="g-bd">
          <div className="m-redeem">
            <div className="redeemform">
              <div className="u-msg">
                <div className="img icn-book"></div>
                <h2>输入图书兑换码</h2>
              </div>
              <div className='ui-form'>
                <div className="ui-form-item">
                  <input type="text" className="u-txt" ref='redeem' />
                  <div className="ui-form-explain" ref='explain'></div>
                </div>
                <div className="ui-form-item">
                  <span>
                    <input type="button" value="确认兑换" className="u-btn1" onClick={() => {this.checkRedeem(this.refs.redeem)}} />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="g-ft">
          <div className="m-cprt">
            <p className="m-crip">
            <span>多看客户端</span>
            <b>|</b>
            <span>电脑版</span>
            </p>
            <p>Copyright©duokan.com</p>
          </div>
        </div>

        <Modal
          popup
          visible={this.state.modal}
          onClose={this.onClose('modal')}
          animationType="fade"
        >
          <div className="m-nav">
            <ul className="m-nav-top">
              <li>
                <NavLink
                  to="/special"
                  className="box"
                  style={{ backgroundColor: "#ef4848" }}
                >
                  <i className="iconfont icon-sale" />
                </NavLink>
                <span>特价</span>
              </li>
              <li>
                <NavLink
                  to="/free"
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-Free-Tag" />
                </NavLink>
                <span>免费</span>
              </li>
              <li>
                <NavLink
                  to="/best"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-tubiaolunkuo-" />
                </NavLink>
                <span>畅销</span>
              </li>
              <li>
                <NavLink
                  to="/shelf"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-icon_shujianor" />
                </NavLink>
                <span>书架</span>
              </li>
            </ul>
            <ul className="m-nav-bottom">
              <li>
                <NavLink
                  to="/classify"
                  className="box"
                  style={{ backgroundColor: "#02d26e" }}
                >
                  <i className="iconfont icon-fenlei" />
                </NavLink>
                <span>分类</span>
              </li>
              <li>
                <NavLink
                  to="/redeem"
                  className="box"
                  style={{ backgroundColor: "#4f8fd6" }}
                >
                  <i className="iconfont icon-shuquan" />
                </NavLink>
                <span>兑换码</span>
              </li>
              <li>
                <NavLink
                  to="/coupon"
                  className="box"
                  style={{ backgroundColor: "#7cc416" }}
                >
                  <i className="iconfont icon-changxiaoremai" />
                </NavLink>
                <span>购书券</span>
              </li>
              <li>
                <a
                  href='http://www.duokan.com/product'
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-bangzhushouji" />
                </a>
                <span>客户端</span>
              </li>
            </ul>
          </div>
        </Modal>
      </div>
    );
  }
};

export default Redeem;
